<template>
	<view class="sc-tour">
		<view class="sc-tour-li" v-for="(item,index) in assemble" :key="index" @tap="$emit('detailTap',item,'3')">
			<image class="sc-tour-li_img" mode="widthFix" :src="item.cover"></image>
			<view class="sc-tour-li_right">
				<view class="font">{{item.name}}</view>
				<text class="class">{{item.tags_name}}</text>
				<!-- <view class="class-tuan"><image :src="Url+'add_images/tour-t.png'" mode="widthFix"></image>3人团</view> -->
				<view class="class-tuanA"><text>{{item.people_num}}</text><text>人团</text></view>
				<view v-if="showTime">
					<view class="class-over clearfix" v-if="item.dateInfo.day > 1 && show">距离结束:{{item.dateInfo.day}}天</view>
					<view class="class-over clearfix" v-else-if="item.dateInfo.day <= 1 && show">距离结束:{{item.dateInfo.h}}时{{item.dateInfo.m}}分</view>
				</view>
				<!-- <image class="sc-tour-li_status" src="../../static/image/index/ic-tour.png"></image> -->
				<view class="sc-tour-li_price clearfix">
					<view class="sc-tour-li_toll">{{item.goods_price}}</view>
					<view class="sc-tour-li_btn" v-if="show" @tap.stop="$emit('detailTap',item,'3')">去拼团</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			assemble:{type:Array},
			show:{
				type:Boolean,
				default:true
			},
			showTime:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				Url:this.Imgurl
			};
		},
		created() {
			// let data = this.assemble;
			// let date = new Date();
			// let now = date.getTime();
			// data.forEach((item,index)=>{
			// 	let da = (item.time*1000) - (item.now_time*1000);
			// 	item.dateInfo = this.getDuration(da)
			// })
			// console.log('xaio',data)
			// this.assemble = data;
		},
		methods: {
			toproductdetail (index) {
				uni.navigateTo({
					url: '/pageB/classify/productdetail?id='+index + '&type=' + '3'
				})
			}
		}
	}
</script>

<style lang="less">
	.sc-tour{
		overflow: hidden;
		background-color: #FFFFFF;
		&-li{
			padding: 20upx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;
			&:last-child{
				.sc-tour-li_right{
					border: none;
				}
			}
		}
		&-li_img{
			width: 218upx;
			height: 218upx;
			position: relative;
			border-radius: 10upx;
			overflow: hidden;
			&::before{
				content: "拼团";
				display: block;
				position: absolute;
				top:10upx;
				left: 0;
				width: auto;
				height: auto;
				float: left;
				padding: 6upx 22upx 6upx 18upx;
				font-size: 18upx;
				color: #FFFFFF;
				font-weight: bold;
				background:linear-gradient(90deg,rgba(246,200,85,1),rgba(241,157,75,1));
				border-radius:0px 20upx 20upx 0px;
			}
		}
		&-li_right{
			margin-left: 40upx;
			border-bottom: 2upx solid #F9F9F9;
			padding-bottom: 40upx;
			.font{
				font-size: 28upx;
				color: #333333;
				height: 40upx;
				line-height: 40upx;
				width: 450upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.class{
				font-size: 24upx;
				color: #999999;
				display: block;
				height: 32upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin:10upx 0;
			}
			.class-tuanA{
				width: auto;
				height: auto;
				float: left;
				margin: 10upx 0;
				// padding: 6upx 14upx;
				background-color: #FD7377;
				// color: #FFFFFF;
				font-size: 22upx;
				border: 2upx solid #FD7377;
				border-radius:5upx;
				overflow: hidden;
				text{
					&:first-child{
						padding: 6upx 14upx;
						color: #FFFFFF;
						box-sizing: border-box;
					}
					&:last-child{
					  padding:7upx;
					  background-color: #FFFFFF;
					  color: #FD7377;
					  font-size: 18upx;	
					  box-sizing: border-box;
					}
				}
			}
			.class-tuan{
				font-size:24upx;
				font-weight: 500;
				color: rgba(255,40,66,1);
				margin: 10upx 0;
				display: flex;
				align-items: center;
				image{
					width: 24upx;
					height: 24upx;
					margin-right: 5upx;
				}
			}
			.class-over{
				font-size:24upx;
				font-weight: 500;
				color: rgba(102,102,102,1);
				margin-bottom:16upx;
			}
		}
		&-li_status{
			width: 100upx;
			height: 30upx;
			background-image: url(../../static/image/index/ic-tour.png);
			background-repeat: no-repeat;
			background-size: cover;
			font-size: 18upx;
			line-height: 30upx;
			color: #FFFFFF;
			text-align: center;
		}
		&-li_price{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-li_toll{
			font-size:28upx;
			color: #FF2842;
			font-weight: bold;
			&::before{
				content: "￥";
				font-size: 20upx;
				font-weight: 500;
			}
		}
		&-li_btn{
			width: 145upx;
			height: 51upx;
			line-height: 51upx;
			background:linear-gradient(90deg,rgba(253,115,119,1),rgba(255,40,66,1));
			border-radius:26upx;
			color: #FFFFFF;
			font-size: 24upx;
			text-align: center;
			outline: none;
			// cursor:pointer;
		}
	}
</style>
